<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="form-title">
                <div class="form-title-con">
                    地址管理
                    &#X3000;
                    <label class="label_style_slect">地区：</label>
                    <el-select v-model="addressId" placeholder="请选择省份" @change="changeaPrevice()" class="select_it_style">
                        <el-option
                                v-for="item in proviceList"
                                :key="item.id"
                                :label="item.address_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    &nbsp;
                    <el-select v-model="cityIdAddress" placeholder="请选择市区" @change="changeaCity()" class="select_it_style">
                        <el-option
                                v-for="item in cityList"
                                :key="item.id"
                                :label="item.address_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    &#X3000;
                    <el-button type="primary" size="small" @click="addADdress()">新增地址</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="parent_address_id" label="上级地址ID"> </el-table-column>
            <el-table-column prop="address_code" label="地址代码"> </el-table-column>
            <el-table-column prop="address_name" label="地址名称"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editAddressInfo(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <DialogInput ref="addAddressDialog" title="地区信息">
            <div class="rem-dialog-con">
                <el-form :model="addForm" label-width="120px" size="small">
                    <el-form-item label="上级地址：">
                        <el-col :span="24" style="text-align: left;">
                            <el-select v-model="addForm.head_bank_id" placeholder="请选择">
                                <el-option
                                        v-for="item in proviceList"
                                        :key="item.id"
                                        :label="item.address_name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="地址代码：">
                        <el-col :span="24">
                            <el-input type="text" v-model="addForm.address_code" placeholder="请输入地址代码"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="地址名称：">
                        <el-col :span="24">
                            <el-input type="text" v-model="addForm.address_name" placeholder="请输入地址名称"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddAddress()">添加</el-button>
            </span>
        </DialogInput>
        <DialogInput ref="editAddresDialog" title="地址信息">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="120px" size="small">
                    <el-form-item label="地址代码：">
                        <el-col :span="24">
                            <el-input type="text" v-model="form.address_code" placeholder="请输入地址代码"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="地址名称：">
                        <el-col :span="24">
                            <el-input type="text" v-model="form.address_name" placeholder="请输入地址名称"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmEditAddress()">修改</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import FormAddress from '@component/common/FormAddress.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    @Component({
        components: {
            FormAddress,
            DialogInput
        }
    })
    export default class AddressManage extends Vue {
        form = {
            address_code: '',
            address_name: ''
        }
        addForm = {
            head_bank_id: '',
            address_code: '',
            address_name: ''
        }
        addressId: string|number = '';
        addressCityId: string|number = '';
        address_name: string = '';
        cityIdAddress: string = ''
        tableData = []

        proviceList = []
        cityList = []

        addressFilter () {}
        async getAllAdsress () {
            let res = await this.$http.get(`otherconstants/addressNext/${this.addressId}`)
            if (res.status == 200) {
                this.tableData = res.data;
            }
        }
        async getAllCityLocal () {
            let res = await this.$http.get(`otherconstants/addressNext/${this.cityIdAddress}`)
            if (res.status == 200) {
                this.tableData = res.data;
            }
        }
        async getAllProvice () {
            let res = await this.$http.get(`otherconstants/addressNext/${this.addressId}`)
            if (res.status == 200) {
                this.proviceList = res.data;
            }
        }
        editAddressInfo (data) {
            this.form.address_code = data.address_code;
            this.form.address_name = data.address_name;
            this.form.id = data.id
            this.$refs['editAddresDialog'].openDialog();
        }
        async confirmEditAddress () {
            if (this.form.address_code == '') {
                this.$alert('请输入地址代码！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.address_name == '') {
                this.$alert('请输入地址名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let res = await this.$http.put(`otherconstants/address/${this.form.id}`, this.form)
            if (res.status == 200) {
                this.getAllAdsress();
                this.$refs['editAddresDialog'].closeDialog();
            }
        }

        addADdress () {
            this.$refs['addAddressDialog'].openDialog();
        }
        async confirmAddAddress () {
            if (this.addForm.head_bank_id == '') {
                this.$alert('请选择上级地址！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.addForm.address_code == '') {
                this.$alert('请输入地址代码！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.addForm.address_name == '') {
                this.$alert('请输入地址名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let postData = {
                parent_address_id: this.addForm.head_bank_id,
                address_code: this.addForm.address_code,
                address_name: this.addForm.address_name
            }
            let res = await this.$http.post('otherconstants/address', postData)
            if (res.status == 201) {
                this.getAllAdsress();
                this.$refs['addAddressDialog'].closeDialog();
            }
        }

        changeaPrevice () {
            this.getAllAdsress()
            this.cityIdAddress = ''
            if (this.addressCityId == 1 || this.addressCityId == 20 || this.addressCityId == 860 || this.addressCityId == 2462) {
                this.addressCityId = Number(this.addressId) + 1;
            }else {
                this.addressCityId = this.addressId;
            }
            this.getCity()
        }
        changeaCity () {
            this.getAllCityLocal()
        }
        async getCity () {
            let res = await this.$http.get(`otherconstants/addressNext/${this.addressCityId}`)
            if (res.status == 200) {
                this.cityList = res.data;
            }
        }
        closeDialog () {
            this.$refs['addAddressDialog'].closeDialog();
            this.$refs['editAddresDialog'].closeDialog();
        }
        mounted () {
            this.getAllAdsress()
            this.getAllProvice()
        }
    }
</script>

<style lang="scss" scoped>
    .font_title {
        font-size: $__little-font-size;
    }
</style>